<template>
  <div class="foodInfo">
    <top></top>
    <div class="foodInfo1">
      <div class="foodInfo2">
        <div class="foodInfo3">
          <div class="foodInfo5">
            {{food.name}}
          </div>
          <div class="foodInfo6">
            窗口位置:{{food.address}}
          </div>
          <div class="foodInfo6">
            营业时间:{{food.open}}
          </div>
          <el-rate style="margin-top:10px"
          v-model="food.star"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}">
        </el-rate>
        </div>
        <div class="foodInfo4">
          <el-image fit="cover"
            style="width: 300px; height: 180px;border-radius:5px"
            :src="url" 
            :preview-src-list="srcList">
          </el-image>
        </div>
      </div>
    </div>
    <div class="foodInfo7">
      <div class="foodInfo8">
        <div class="foodInfo9" v-if="!favor" @click="saveFoodFavor">
          <i class="el-icon-star-off"></i>
        </div>
        <div class="foodInfo9" v-if="favor" @click="removeFoodFavor">
          <i class="el-icon-star-on"></i>
        </div>
        <div class="foodInfo10">
          {{food.restaurant}}
        </div>
      </div>
    </div>
    <div class="foodInfo11">
      <div class="foodInfo12">
        <div class="foodInfo13" v-html="food.content">
          
        </div>
      </div>
    </div>
    <div class="foodInfo14">
      <div class="foodInfo15">
        <div class="foodInfo16">
          <div class="foodInfo17">
            <span v-if="replay">回复{{replay.createBy}}的评论:</span>
            <span v-if="!replay">评论:</span>
          </div>
          <div class="foodInfo18">
            <el-input type="textarea" rows="7" v-model="comment.content" placeholder="请输入评论内容"></el-input>
            <el-upload style="margin-top:20px"
            :file-list="fileList"
            ref="upload"
            :action="uploadImageUrl()"
            accept="image/*"
            :multiple="false"
            :limit="9"
            :before-upload="beforeAvatorUpload"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-exceed="handleExceed"
            :on-success="handleAvatorSuccess"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <el-button @click="saveFoodComment" icon="el-icon-position" type="primary" style="font-family:'黑体';margin-top:10px">评论</el-button>
          </div>
          <div class="foodInfo17" style="margin-top:30px">评论列表:</div>
          <div v-if="tableData.length > 0" v-for="(item,index) in tableData" :key="index">
            <div class="foodInfo19">
              <div class="foodInfo20">
                <img :src="$store.state.HOST + item.avatar">
                <div class="foodInfo21">{{item.createBy}}{{item.replayName?'回复' + item.replayName + '的评论':''}} - {{item.createTime}}</div>
              </div>
              <div class="foodInfo22" @click="replayComment(item)">
                回复
              </div>
            </div>
            <div class="foodInfo23">
              {{item.content}}
            </div>
            <div class="foodInfo24" v-if="item.image">
              <img @click="lookImage(e)" v-for="(e,k) in item.image.split(',')" :key="k" :src="e">
            </div>
          </div>
          <el-empty v-if="tableData.length <= 0" style="font-family:'黑体'" description="暂无评论,快去评论吧！"></el-empty>
          <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :current-page="pageNumber"
          @current-change="handleCurrentChange"
          :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <bottom></bottom>
  </div>
</template>

<script>
  import {mixin} from "../../minix";
  import {addLook,getFoodCommentPage,getFoodListById,saveFoodFavor,getFoodFavorByListId,removeFoodFavor,saveFoodComment} from '../../api/api'
  import top from '@/components/top'
  import bottom from '@/components/bottom'
  export default {
    mixins: [mixin],
    data() {
      return{
        url: '',
        srcList: [],
        id: "",
        food: {},
        fileList: [],
        dialogImageUrl: '',
        dialogVisible: false,
        favor: null,
        comment: {
          content: "",
          image: "",
          replyId: "",
        },
        replay: null,
        pageNumber: 1,
        pageSize:10,
        total: 0,
        tableData: []
      }
    },
    components: {
        top,
        bottom,
    },
    methods: {
      addLook() {
        addLook({id: this.id}).then(res => {

        })
      },
      lookImage(url) {
        window.open(url)
      },
      replayComment(item) {
        this.replay = item
        this.comment.replyId = this.replay.id
      },
      handleAvatorSuccess(res) {
        let _this = this;
        if(res.code == 1000){
            _this.$message({
              type: 'success',
              message: '上传成功!'
            });
            this.fileList.push({url:this.$store.state.HOST + res.message})
        }else{
          _this.$notify.error({
            title: '错误',
            message: res.message
          });
        }
      },
      handleRemove(file, fileList) {
        this.fileList = fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      toRest() {
        this.$router.push("/restaurantInfo?id=" + this.food.restId)
      },
      getFoodFavorByListId() {
        getFoodFavorByListId({listId: this.id}).then(res => {
          if (res.code == 1000) {
            if (res.data) {
              this.favor = res.data
            }
          }
        })
      },
      removeFoodFavor() {
        removeFoodFavor({ids: this.favor.id}).then(res => {
          if (res.code == 1000) {
            this.$message({
                message: '取消收藏成功',
                type: 'success'
            });
            this.favor = null
            this.getFoodFavorByListId()
          }
        })
      },
      saveFoodFavor() {
        var param = {
          listId: this.id
        }
        saveFoodFavor(param).then(res => {
          if (res.code == 1000) {
            this.$message({
                message: '收藏成功',
                type: 'success'
            });
            this.getFoodFavorByListId()
          } else {
            this.$message({
                message: res.message,
                type: 'warning'
            });
          }
        }) 
      },
      handleCurrentChange(val) {
        this.pageNumber = val
        this.getFoodCommentPage()
      },
      getFoodCommentPage() {
        var param = {
          listId: this.id,
          pageNumber: this.pageNumber,
          pageSize: this.pageSize
        }
        getFoodCommentPage(param).then(res => {
          if (res.code == 1000) {
            this.tableData = res.data.records
            this.total = res.data.total
          }
        })
      },
      getFoodListById() {
        getFoodListById({id: this.id}).then(res => {
          if (res.code == 1000) {
            this.food = res.data
            var image = res.data.image.split(',')
            this.url = image[0]
            this.srcList = image
          }
        })
      },
      saveFoodComment() {
        if (!this.comment.content) {
          this.$message({
            message: '请输入评论内容',
            type: 'warning'
          });
          return
        }
        var file = []
        for(let i = 0;i < this.fileList.length;i++) {
            file.push(this.fileList[i].url)
        }
        if (file.length > 0) {
            this.comment.image = file.join(",")
        }
        var param = {
          listId: this.id,
          content: this.comment.content,
          image: this.comment.image,
          replyId: this.comment.replyId
        }
        saveFoodComment(param).then(res => {
          if (res.code == 1000) {
            this.$message({
              message: '评论成功',
              type: 'success'
            });
            this.comment = {
              content: "",
              image: "",
              replyId: "",
              replayName: "",
            }
            this.replay = {}
            this.fileList = []
            this.getFoodCommentPage()
          }
        })
      }
    },
    created() {
     
    },
    mounted() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
      this.id = this.$route.query.id
      this.addLook()
      this.getFoodListById()
      this.getFoodFavorByListId()
      this.getFoodCommentPage()
    }
 }
</script>

<style scoped>
@import url('../../assets/css/foodInfo.css');
.foodInfo18>>>.el-textarea__inner {
  -webkit-appearance: none;
  background-color: #EEF0F3;
  background-image: none;
  border-radius: 4px;
  border: 0;
  width: 100%;
  font-family: '黑体';
}
::v-deep img {
  max-width: 100% !important;
}
</style>